<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>OGC-WFS</title>
  <!--引入第三方的jquery脚本库-->
  <script include="jquery" src="./static/libs/include-lib-local.js"></script>
  <script src="./static/libs/include-mapboxgl-local.js"></script>
  <!--引入当前页面样式表-->
  <link href="./static/demo/mapboxgl/example/style.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
    #map {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 100vh;
    }
  </style>
  <script>
    //使用严格模式
    "use strict";
    var map, popup;
    var tiandituKey = "f5347cab4b28410a6e8ba5143e3d5a35";
    /**
    * 地图初始化
    */
    function init() {
      //实例化要加载的source来源对象（世界矢量地图）
      var dark = {
        type: "raster",
        tiles: [
          //来源请求地址，请求天地图提供的全球矢量地图WMTS服务
          "http://t" +
          Math.round(Math.random() * 7) +
          ".tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles" +
          "&TILECOL=" +
          "{x}" +
          "&TILEROW=" +
          "{y}" +
          "&TILEMATRIX=" +
          "{z}" +
          "&tk=" +
          tiandituKey,
        ],
        //栅格瓦片的分辨率
        tileSize: 256,
      };
      //实例化Map对象加载地图
      map = new mapboxgl.Map({
        crs: "EPSG:4326", //经纬度一定要设置crs参数
        maxBounds: [
          [-180, -90],
          [180, 90],
        ],
        //地图容器div的id
        container: "map",
        //设置地图样式信息
        style: {
          //设置版本号，一定要设置
          version: 8,
          //添加来源
          sources: {
            dark: dark,
          },
          //设置加载并显示来源的图层信息
          layers: [
            {
              //图层id，要保证唯一性
              id: "dark",
              //图层类型
              type: "raster",
              //连接图层来源
              source: "dark",
              //图层最小缩放级数
              minzoom: 0,
              //图层最大缩放级数
              maxzoom: 22,
            },
          ],
        },
        zoom: 10,
        center: [116.39, 39.90]
      });
      popup = new mapboxgl.Popup({ closeOnClick: false });
      popup.on("close", function () {

      });
      var { protocol, ip, port } = window.webclient;
      //注册地图加载事件
      map.on("load", function () {
        var baseurl = `${protocol}://${ip}:${port}/igs/rest/ogc/doc/北京市/WFSServer?REQUEST=GetFeature&version=1.1.0&service=wfs&typename=北京市:北京市&maxFeatures=10`;
        $.ajax({
          url: baseurl,
          type: "get",
          dataType: "xml",
          contentType: "application/x-www-form-urlencoded",
          success: loadGeoJson,
          error: function (xml) {
            alert("请求失败");
          }
        });
      });
      //注册鼠标移动事件
      map.on('mousemove', function (e) {
        document.getElementById('mouse-position').innerHTML = "经度：" + e.lngLat.lng.toFixed(2) + "，纬度：" + e.lngLat.lat.toFixed(2);
      });

      function loadGeoJson(xml) {
        if (!!xml) {
          var beijing = xml.children[0].children[0].children[0].children;
          var html = "<table>";
          for (var i = 1; i < 7; i++) {
            const element = beijing[i];
            html += "<tr><td><b>" + beijing[i].localName + "</b></td><td>" + beijing[i].textContent + "</td></tr>"
          }
          html += "</table>";
          popup.setLngLat([116.39, 39.90]).setHTML(html).addTo(map);
        } else {
          alert("没有查询到数据");
        }
      }
    }
  </script>
</head>

<body onload="init()">
  <div id="map">
    <div id="mouse-position">
    </div>
  </div>
</body>

</html>